import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'
import { PlusOutlined } from '@ant-design/icons';
import {
    message,
    Form,
    Input,
    Button,
    Select,
    Rate,
} from 'antd';

import request, { baseUrl } from '../../../utils/request'

const Edit = () => {
    const navigate = useNavigate()
    // 获取动态路由id
    const { id } = useParams();
    console.log('id', id)

    // 创建表单实例
    const [myform] = Form.useForm()
    const [question, setQuestion] = useState({})
    const getData = async () => {
        const { data } = await request.get('/iq/' + id)
        setQuestion(data.data)
        console.log('data.data', data.data.company);
        // 给表单写入数据 
        myform.setFieldsValue(data.data)

        //指定特殊表单值
        myform.setFieldValue('company', data.data.company.name)

    }


    // 获取分类
    const [category, setCategory] = useState([])
    const submit = async ({ _id, ...values }) => {
        console.log('values', values)

        const { data } = await request.patch('/iq/' + _id, values)
        if (data.status === 200) {
            message.success('数据修改成功')
            navigate('/manage/question/list')
        }
    }

    useEffect(() => {
        getData()
        request.get('/category').then(({ data }) => {
            setCategory(data.data)
            // console.log('data.data', data.data);
        })
    }, [])

    return (
        <div>
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                layout="vertical"
                initialValues={question}
                onFinish={submit}

                form={myform}
            >
                <Form.Item name="_id" hidden>
                    <Input />
                </Form.Item>
                <Form.Item label="公司名称修改" name="company">
                    <Input />
                </Form.Item>
                <Form.Item label="面试题目修改" name="question">
                    <Input />
                </Form.Item>
                <Form.Item label="分类修改" name='category'>
                    <Select >
                        {
                            category.map(item => (
                                <Select.Option key={item._id} value={item.name}>{item.name}</Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item>
                <Form.Item label="难度修改" name='difficulty'>
                    <Rate allowHalf />
                </Form.Item>
                <Form.Item label="问题补充修改" name='summary'>
                    <Input.TextArea showCount style={{
                        height: 120,
                    }} maxLength={1000} />
                </Form.Item>

                <Form.Item >
                    <Button type='primary' htmlType='submit'>修改</Button>
                </Form.Item>
            </Form>

        </div>
    )
}

export default Edit;